<template>
  <div class="" id="index">
    <el-container style="">
      <el-header>
        <div style="display: -webkit-flex">
          <!--系统名称-->
          <div style="height: 58px; margin-left: -10px">
            <img
              style="
                border-radius: 50%;
                width: 50px;
                height: 50px;
                margin-top: -3px;
                vertical-align: middle;
              "
              src="../assets/img/123.jpg"
            />
            <span
              style="
                color: #fff;
                font-size: 20px;
                letter-spacing: 3px;
                font-weight: 400;
              "
              >德召文卡修系统</span
            >
            <el-button
              round
              style="
                height: 34px;
                background-color: rgb(57, 61, 73);
                border: 0;
                margin-left: 20px;
                color: aliceblue;
              "
              @click="loginOut"
              >注销</el-button
            >
          </div>
          <!--公告栏   用户名称-->
          <div style="width: 300px; height: 58px; margin-left: 160px">
            <i style="color: #fff; font-size: 14px" class="el-icon-bell"
              >&nbsp;&nbsp;公告栏</i
            >
            <i
              style="color: #fff; font-size: 14px; margin-left: 50px"
              class="el-icon-user"
            ></i>
            &nbsp;
            <a>
              <img
                style="
                  border-radius: 50%;
                  width: 35px;
                  height: 35px;
                  margin-top: -3px;
                  vertical-align: middle;
                "
                src="../assets/img/lbxx.jpg"
              />
              <div style="margin-top: -67px; margin-left: 185px">
                <span style="color: #fff; font-size: 16px; font-weight: 600">{{
                  this.$store.getters.getUser.ename
                }}</span>
              </div>
              <div style="margin-top: -45px; margin-left: 185px">
                <span style="color: #999; font-size: 8px; font-weight: 200">{{
                  this.$store.getters.getUser.role.jurisdictionname
                }}</span>
              </div>
            </a>
          </div>
          <!--功能选项-->
          <div style="height: 58px;">
            <el-menu
              class="el-menu-demo"
              mode="horizontal"
              style="border-bottom: #000"
              background-color="rgb(28, 29, 30)"
              text-color="#fff"
              active-text-color="#ffd04b"
            >
              <el-menu-item index="0">首页</el-menu-item>
              <el-menu-item index="1">维修</el-menu-item>
              <el-menu-item index="2">前台</el-menu-item>
              <el-menu-item index="3">客户</el-menu-item>
              <el-menu-item index="4">数据</el-menu-item>
              <el-menu-item index="5">人事</el-menu-item>
            </el-menu>
          </div>
          <!--设置-->
          <div style="margin-left: 230px">
            <i style="color: #fff" class="el-icon-setting">&nbsp;&nbsp;设置</i>
          </div>
        </div>
      </el-header>
      <!---->
      <el-container>
        <el-aside width="205px">
          <div id="div2">
            <el-row>
              <el-col :span="24">
                <!--:router="true" 是否支持路由  index就为路由路径-->
                <el-menu
                  class="el-menu-vertical-demo"
                  style="width: 200px; border: 1px"
                  background-color="#545c64"
                  text-color="#fff"
                  active-text-color="#ffd04b"
                >
                  <!--首页-->
                  <router-link to="/index">
                    <el-menu-item index="1">
                      <i class="el-icon-s-home"></i>
                      <span slot="title">首页</span>
                    </el-menu-item>
                  </router-link>
                  <el-submenu
                    :index="i"
                    v-for="(temp, i) in treeNodes"
                    :key="i"
                  >
                    <template slot="title">
                      <i class="el-icon-user"></i>
                      <span>{{ temp.text }}</span>
                    </template>
                    <el-menu-item-group v-if="temp.children.length != 0">
                      <el-menu-item
                        v-for="(temp2, j) in temp.children"
                        :key="j"
                        :index="i-j"
                        @click="page(temp2.id)"
                      >
                        <i class="el-icon-message"></i>{{ temp2.text }}
                      </el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>
                </el-menu>
              </el-col>
            </el-row>
          </div>
        </el-aside>
        <el-main style="width: 100%; padding: 1px; height: 100%">
          <!--路由视图-->
          <div style="height: 659px" id="div3">
            <router-view />
            <div style="padding-top: 20px"></div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    //这里存放数据
    return {
      menuMapping: {
        wx001: "/index/repairlist",
        wx002: "/index/jg",
        wx003: "/index/lsettle",
        yh001: "/index/luser",
        yh002: "/index/lscclgl",
        yh003: "/index/lscvip",
        jg001: "/index/TeamOrGroupPage",
        jg002: "/index/LegworkVehicle",
        jg003: "/index/ArtisanGradePage",
        sj001:"/index/xmwx",
        sj002:"/index/fdjpp",
        sj003:"/index/cxda",
        sj004:"/index/ghs",
        xt001:"/index/AdditionalRole",
        xt002:"/index/addRole",
        zg001:"/index/staff",
        zg002:"/index/dim",
        zg003:"/index/cate",
        zg004:"/index/job",
      },
      treeNodes: [],
    };
  },
  //计算属性
  computed: {},
  //方法集合
  methods: {
    loginOut() {
      let th = this;
      this.$confirm("是否注销?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$message({
          type: "success",
          message: "注销成功!",
        });
        th.$http.get("http://127.0.0.1:8080/api/emp/loginOut").then();
        th.$store.commit("setUser", null);
        th.$router.push("/");
      });
    },
    initPermTree(e) {
      let _this = this;
      this.$http
        .post("http://127.0.0.1:8080/api/emp/getFunTree", e)
        .then(function (resp) {
          _this.treeNodes = resp.data;
          console.info(_this.treeNodes);
        });
    },
    page(id) {
      this.$router.push(this.menuMapping[id]);
    },
  },
  //挂载完成（可以访问DOM元素）
  mounted() {
    this.initPermTree(this.$store.getters.getUser);
  },
  //监控data中的数据变化
  watch: {},
};
</script>
<style  scoped>
/*@import url(); 引入公共css类*/
.el-header,
.el-footer {
  background-color: rgb(28, 29, 30);
  color: #333;
  line-height: 60px;
}
.el-footer {
  background-color: #333;
}
.el-aside {
  background-color: rgb(84, 92, 100);
  color: #333;
  line-height: 200px;
}

.el-menu {
  border: 0px;
}

.el-main {
  padding: 0;
}
</style>

<style>
a {
  text-decoration: none;
}
body {
  margin: 0px;
  bottom: 0px;
}
#div2 {
  widows: 230px;
  height: 650px;
  overflow-wrap: break-word;
  overflow-y: scroll;
}
#div3 {
  overflow-wrap: break-word;
  overflow-y: scroll;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 5px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  border-radius: 1px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 1px;

  background: rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 0, 0, 0.4);
}
html {
  overflow: hidden;
}
</style>